import React, { useState, useEffect } from "react";
import { useNavigate } from 'react-router-dom'
import {useSelector} from "react-redux";
import {Pagination, Table, Tooltip, Tag, Button, Input} from 'antd';
import ContentLayout from "../../components/layout/ContentLayout";
import './news.css'
import { useTableData } from "../../hooks/table/useTableData";
import { useUpdateData } from './hooks/useUpdateData'
const { Search } = Input
const News = () => {
    const navigate = useNavigate()
    const [tableData, setTableData] = useState([])
    const [ ajaxData, setAjaxData  ] = useState({
        page: 1,
        limit: 10,
        title: '',
    })
    const handleToView = row => {
        navigate(`/news/detail?page=view&id=${row.newsid}`)
    }
    const { role } = useSelector(state => state.user.userData)
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            align: 'center',
        },
        {
            title: '标题',
            dataIndex: 'title',
            ellipsis: {
                showTitle: false,
            },
            width: 300,
            render: (title,row) => (
                <Tooltip placement="topLeft" title={title}>
                    <a onClick={() => handleToView(row)}>{title}</a>
                </Tooltip>
            ),
        },
        {
          title: '内容',
          dataIndex: 'content',
          width: 380,
          ellipsis: {
                showTitle: false,
            },
        },
        {
            title: '创建人',
            dataIndex: 'author',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
            render: status => <Tag color={ status ? 'green': 'volcano' }>{ status ? '已发布' : '未发布' }</Tag>
        },
        {
            title: '发布时间',
            dataIndex: 'publishdate',
            align: 'center',
        },
        {
            title: '操作',
            align: 'center',
            width: 200,
            render: (_,row) =>{
                return role ? newsUpdateBtns(row) : <div />
            }
        }
    ]
    const [ total,setTotal ] = useState(0)
    const { getTableData, loading } = useTableData({ tableUrl: '/news/query',setTableData,setTotal })
    const { newsUpdateBtns } = useUpdateData(getTableData)
    useEffect(() => {
        getTableData(ajaxData)
    },[ajaxData])
    const onSearch = searchVal => {
        setAjaxData({
            ...ajaxData,
            title: searchVal
        })
    }
    const handleChangePagination = (page,pageSize) => {
        setAjaxData( {
            page,
            limit:pageSize
        })
    }
    const handleToAdd = () => {
        // 跳转详情页
        navigate('/news/detail')
    }
    return (
        <div style={{ height: '100%',width: '100%' }}>
            <ContentLayout
                searchComp={
                    <div  className="top-bar">
                        <div className="btn">
                            { role ? <Button type="primary" onClick={handleToAdd}>新增</Button> : <div />}
                        </div>
                        <div className="search">
                            <Search placeholder="请输入标题" onSearch={onSearch} enterButton />
                        </div>
                    </div>
                }
                mainComp={
                    <Table  rowKey={"newsid"} loading={loading}  pagination={false} columns={columns} dataSource={tableData} />
                }
                    footerComp={
                        <Pagination
                            onChange={handleChangePagination}
                            defaultCurrent={ajaxData.page}
                            showSizeChanger
                            showTotal={(total) => `总计 ${total}条`}
                            total={total} />
                    }
            />
        </div>
    )
}

export default News
